<template>
  <ul>
    <li>
      <div>背景图片</div>
    </li>
    <li>
      <div>背景颜色</div>
    </li>
    <li>
      <!-- 按钮选择 -->
      <el-button-group class="btn-group">
        <el-button
          :class="index === config.btnIndex ? `btn-primary btn` : `btn`"
          :type="index === config.btnIndex ? 'primary' : 'default'"
          v-for="(item, index) in config.btnNames"
          @click="tabBtnClick(index)"
        >
          {{ item }}
        </el-button>
      </el-button-group>
    </li>
  </ul>
</template>

<script setup lang="ts">
// 画布的整体配置
const config = reactive({
  btnIndex: 0,
  btnNames: ["主题颜色", "数据配置"],
});

const tabBtnClick = (index: number) => (config.btnIndex = index);
</script>

<style scoped lang="scss">
.btn-primary {
  background-color: var(--el-color-primary);
}
.btn-group {
  display: flex;
  .btn {
    flex: 1;
  }
}
</style>
